<template>
    <div class="q-pa-sm q-gutter-y-sm" :style="'text-align:'+textAlign+';background:'+color+';color:'+fontColor+';font-size:'+fontSize+'px;wdith:100%;'"  v-wechat-title="bookContentBean.title">
        <div>
            <div >
                <q-icon name="home" class="backIndex" @click="backToIndex"/>
                <strong>{{bookContentBean.title}}</strong>
            </div>
        </div>
        <div class="colorConfig" :style="'text-align:'+textAlign">
          <q-btn label="背景">
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="changeColor('#F7EED6',fontSize,textAlign)">
                  <q-item-section>护眼黄</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="changeColor('#e6f2e6',fontSize,textAlign)">
                  <q-item-section>护眼绿</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="changeColor('black',fontSize,textAlign)">
                  <q-item-section>夜间</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn label="居中" style="margin-left: 20px;">
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="changeColor(color,fontSize,'center')">
                  <q-item-section>是</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="changeColor(color,fontSize,'')">
                  <q-item-section>否</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn label="字体" style="margin-left: 20px;">
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="changeColor(color,fontSize+1,textAlign)">
                  <q-item-section>加大</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="changeColor(color,fontSize-1,textAlign)">
                  <q-item-section>减小</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>

        <div class="content" v-if="bookContentBean">
            <div class="qhContent">
                <q-btn class="pre" @click="pre">上一章 </q-btn>
                <q-btn @click="toMl('/bookcontentlist/'+bookContentBean.bookId+'/'+bookName)">目录</q-btn>
                <q-btn class="next" @click="next"> 下一章</q-btn>
            </div>
            <p v-html='bookContentBean.content'>
            </p>
            <div class="qhContent">
                <q-btn class="pre" @click="pre" style="margin-right: 5px">上一章 </q-btn>
                <q-btn @click="toMl('/bookcontentlist/'+bookContentBean.bookId+'/'+bookName)">目录</q-btn>
                <q-btn class="next" @click="next"> 下一章</q-btn>
            </div>
        </div>
    </div>
</template>

<script>

import { pageUrl } from '../util/pageUrl'

let nextRecord = null

import axios from 'axios'
import { nlocalstorage } from '../util/localstorage.js'
import { Plugins } from '@capacitor/core'
const { StatusBar } = Plugins
export default {
  name: 'bookcontent',
  data () {
    return {
      bookContentId: null,
      bookContentBean: {},
      color: '#F7EED6',
      fontSize: 20,
      bookName: '',
      contentLoading: false,
      finished: false,
      fontColor: 'black',
      textAlign: 'center'
    }
  },
  mounted () {
    StatusBar.hide()
    this.bookContentId = this.$route.params.contentid
    this.bookName = this.$route.params.name
    this.getCouponSelected()
    window.addEventListener('scroll', this.handleScroll)

    // let cookieI = Cookies.get('bookcontentColor') // 记录背景颜色信息
    const _this = this
    nlocalstorage.get('bookcontentColor', (cookieI) => {
      if (cookieI && cookieI.color) {
        _this.color = cookieI.color
        _this.fontSize = cookieI.fontSize
        _this.textAlign = cookieI.textAlign
        if (cookieI.color === 'black') {
          _this.fontColor = '#999'
        } else {
          _this.fontColor = 'black'
        }
      }
    })
  },
  watch: {
    bookContentId () {
      // 记录阅读记录
      this.saveRecord()
    }
  },
  methods: {
    /* 获取内容 */
    getCouponSelected () {
      const _this = this
      _this.$q.loading.show()
      axios({
        url: '/novelBook/content/' + _this.bookContentId
      }).then(res => {
        if (res.data.state === 'success') {
          _this.bookContentBean = res.data.obj
          _this.$nextTick(function () {
            _this.jumpTop()
          })
          _this.getNext()
        }
      }).finally(() => {
        _this.$q.loading.hide()
      })
    },
    /* 移动滚动条 */
    jumpTop () {
      const _this = this
      const id = _this.bookContentId
      nlocalstorage.get('bookcontentScrollTop' + this.bookContentBean.bookId, (item) => {
        if (item && item.id === id) {
          console.log(item)
          setTimeout(function () {
            document.documentElement.scrollTop = document.body.scrollTop = item.top
          }, 1000)
        }
      })
    },

    getNext () {
      nextRecord = null
      const _this = this
      axios({
        url: '/novelBook/nextContent/' + _this.bookContentBean.bookId + '/' + _this.bookContentBean.sortIndex
      }).then(res => {
        if (res.data.state === 'success') {
          if (res.data.obj.id) {
            nextRecord = res.data.obj
          }
        }
      })
    },
    next () {
      const _this = this
      if (nextRecord) {
        _this.bookContentBean = nextRecord
        _this.bookContentId = nextRecord.id
        _this.$router.push('/bookcontent/' + nextRecord.id + '/' + _this.bookName + '/' + nextRecord.title).catch(() => {})
        document.documentElement.scrollTop = document.body.scrollTop = 0 // 跳转回最上面
        _this.getNext()
      } else {
        _this.$q.loading.show()
        axios({
          url: '/novelBook/nextContent/' + _this.bookContentBean.bookId + '/' + _this.bookContentBean.sortIndex
        }).then(res => {
          if (res.data.state === 'success') {
            if (!res.data.obj.id) {
              _this.$q.notify('没有了')
            } else {
              _this.bookContentBean = res.data.obj
              _this.bookContentId = res.data.obj.id
              _this.$router.push('/bookcontent/' + res.data.obj.id + '/' + _this.bookName + '/' + res.data.obj.title).catch(() => {})
              document.documentElement.scrollTop = document.body.scrollTop = 0 // 跳转回最上面
              _this.getNext()
            }
          }
          // eslint-disable-next-line no-unused-vars
        }).catch(e => {
          // eslint-disable-next-line no-console
          console.log(e)
          _this.$q.notify('没有了')
        }).finally(() => {
          _this.$q.loading.hide()
        })
      }
    },
    pre () {
      nextRecord = null
      const _this = this
      _this.$q.loading.show()
      axios({
        url: '/novelBook/preContent/' + _this.bookContentBean.bookId + '/' + _this.bookContentBean.sortIndex
      }).then(res => {
        if (res.data.state === 'success') {
          if (!res.data.obj.id) {
            _this.$q.notify({
              message: '没有了'
            })
          } else {
            _this.bookContentBean = res.data.obj
            _this.bookContentId = res.data.obj.id
            _this.$router.push('/bookcontent/' + res.data.obj.id + '/' + _this.bookName + '/' + res.data.obj.title).catch(() => {})
            document.documentElement.scrollTop = document.body.scrollTop = 0 // 跳转回最上面
          }
        }
        // eslint-disable-next-line no-unused-vars
      }).catch(e => {
        // eslint-disable-next-line no-console
        console.log(e)
        _this.$q.notify('没有了')
      }).finally(() => {
        _this.$q.loading.hide()
      })
    },
    changeColor (color, fontSize, textAlign) {
      this.color = color
      this.fontSize = fontSize
      this.textAlign = textAlign
      if (color === 'black') {
        this.fontColor = '#999'
      } else {
        this.fontColor = 'black'
      }
      nlocalstorage.set('bookcontentColor', {
        color: color,
        fontSize: fontSize,
        textAlign: textAlign
      })
    },
    /* 返回目录 */
    toMl (to) {
      this.$router.push(to).catch(() => {})
    },
    /* 保存阅读记录 */
    saveRecord () {
      const _this = this
      if (!_this.bookContentBean) {
        return
      }
      axios({
        url: pageUrl.saveReadRecord,
        params: {
          bookId: _this.bookContentBean.bookId,
          bookContentId: _this.bookContentBean.id
        }
      })
    },
    backToIndex () {
      this.$router.push('/')
    },
    /* 记录滚动条变化 */
    handleScroll (e) {
      const top = document.documentElement.scrollTop
      const id = this.bookContentId
      nlocalstorage.set('bookcontentScrollTop' + this.bookContentBean.bookId, {
        id: id,
        top: top
      })
    }
  }
}
</script>

<style scoped>
.content{
    overflow-y: auto;
    margin-bottom: 20px;
    min-height: 500px;
    margin-left:8px;
    margin-right:8px;
}
    input{
        background-color:transparent;
        border-color:#2c3e50;
    }
    select{
        background-color:transparent;
        border-color:#2c3e50;
    }
    button{
        background-color:transparent;
        border-color:#2c3e50;
    }
select{
    -webkit-appearance: none;
}
input[type=datetime-local]{
    -webkit-appearance:none;
    outline:none;
    border:none;
}

    .colorConfig p{
       font-size: small;
    }

    .backIndex{
       float: left;
        margin-left: 2px;
        margin-top: 2px;
    }
    .qhContent .pre{
        margin-right: 20px;
    }
    .qhContent .next{
        margin-left: 20px;
    }

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
